<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>DOH Validation Relevant Test</title>
		<link rel="stylesheet" href="../../../dojo/resources/dojo.css">
		<link rel="stylesheet" href="../../../dijit/themes/dijit.css">
		<link rel="stylesheet" href="../../../dijit/themes/claro/claro.css">
		<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1, mvc: {debugBindings: 1}" src="../../../dojo/dojo.js"></script>
		<script type="text/javascript">
			require([
				"doh/runner",
				"dojo/dom-class",
				"dojo/parser",
				"dojo/when",
				"dojo/Stateful",
				"dijit/registry",
				"dojox/mvc/ModelRefController",
				"dijit/form/NumberTextBox",
				"dojox/mvc/_TextBoxExtensions"
			], function(doh, domClass, parser, when, Stateful, registry, ModelRefController){

				ctrl = new ModelRefController({
					ownProps: {relation: 1, _setNum1Attr: 1, _setNum2Attr: 1},
					relation: null,
					model: new Stateful({num1: 10, num2: 20}),
					_setNum1Attr: function(value){
						this.set("relation", [value, this.get("num2")]);
						this._set("num1", value);
					},
					_setNum2Attr: function(value){
						this.set("relation", [this.get("num1"), value]);
						this._set("num2", value);
					}
				});

				disabledConverter = {
					format: function(value){
						return value && value[0] === value[1];
					},
					parse: function(value){
						throw new Error();
					}
				};

				validConverter = {
					format: function(value){
						return !value || value[0] < value[1];
					},
					parse: function(value){
						throw new Error();
					}
				};

				when(parser.parse(), function(){
					// should be able to verify all of the inputs
					doh.register("Check values and bindings", [
						{
							name: "initial",
							runTest: function(){
								var num1 = registry.byId("num1");
								var num2 = registry.byId("num2");
								doh.is(10, num1.get("value"), "num1 should be 10");
								doh.is(20, num2.get("value"), "num2 should be 20");
								doh.t(num1.isValid(), "num1.isValid() should be true");
								doh.t(num2.isValid(), "num2.isValid() should be true");
								doh.f(num2.disabled, "num2.disabled should be false");
								doh.f(num1.disabled, "num1.disabled should be false");
							}
						}, {
							name: "Update-Num1-invalid",
							runTest: function(){
								var num1 = registry.byId("num1");
								var num2 = registry.byId("num2");
								num1.set("displayedValue", "30");
								doh.is(30, num1.get("value"), "num1 should be 30");
								doh.f(num1.disabled, "num1.disabled should be false");
								doh.is(20, num2.get("value"), "num2 should be 20");
								doh.f(num2.isValid(), "num2.isValid() should be false");
								doh.f(num2.disabled, "num2.disabled should be false");
								doh.t(domClass.contains(num1.domNode, "dijitNumberTextBoxError"), "num1 should have the dijitNumberTextBoxError class");
								doh.t(domClass.contains(num2.domNode, "dijitNumberTextBoxError"), "num2 should have the dijitNumberTextBoxError class");
							}
						}, {
							name: "Update-Num1-disabled2",
							runTest: function(){
								var num1 = registry.byId("num1");
								var num2 = registry.byId("num2");
								num1.set("displayedValue", "21");
								num2.set("displayedValue", "21");
								doh.is(21, num1.get("value"), "num1 should be 21");
								doh.is(21, num2.get("value"), "num2 should be 21");
								doh.t(registry.byId("num2").disabled, "num2.disabled should be true");
								doh.t(registry.byId("num1").disabled, "num1.disabled should be true");
							}
						}
					]);

					doh.run();
				});
			});
		</script>
	</head>
	<body class="claro">
		<script type="dojo/require">at: "dojox/mvc/at"</script>
		<form method="post">
			<div>
				<label for="num1">Number 1</label>
				<input id="num1" data-dojo-type="dijit.form.NumberTextBox"
				 data-dojo-props="value: at(ctrl, 'num1'),
				                  disabled: at(ctrl, 'relation').transform(disabledConverter),
				                  valid: at(ctrl, 'relation').transform(validConverter)">
			</div>
			<div>
				<label for="num2">Number 2</label>
				<input id="num2" data-dojo-type="dijit.form.NumberTextBox"
				 data-dojo-props="value: at(ctrl, 'num2'),
				                  disabled: at(ctrl, 'relation').transform(disabledConverter),
				                  valid: at(ctrl, 'relation').transform(validConverter)">
			</div>
		</form>
	</body>
</html>
